<style>
    #layui-upload-box li{
        width: 120px;
        height: 100px;
        float: left;
        position: relative;
        overflow: hidden;
        margin-right: 10px;
        border:1px solid #ddd;
    }
    #layui-upload-box li img{
        width: 100%;
    }
    #layui-upload-box li p{
        width: 100%;
        height: 22px;
        font-size: 12px;
        position: absolute;
        left: 0;
        bottom: 0;
        line-height: 22px;
        text-align: center;
        color: #fff;
        background-color: #333;
        opacity: 0.6;
    }
    #layui-upload-box li i{
        display: block;
        width: 20px;
        height:20px;
        position: absolute;
        text-align: center;
        top: 2px;
        right:2px;
        z-index:999;
        cursor: pointer;
    }
</style>
<script>

    layui.use(['upload'],function () {
        var upload = layui.upload

        //普通图片上传
        var uploadInst = upload.render({
            elem: '#uploadPic'
            ,url: '{{ route("uploadImg") }}'
            ,multiple: false
            ,data:{"_token":"{{ csrf_token() }}"}
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                /*obj.preview(function(index, file, result){
                 $('#layui-upload-box').append('<li><img src="'+result+'" /><p>待上传</p></li>')
                 });*/
                obj.preview(function(index, file, result){
                    $('#layui-upload-box').html('<li><img src="'+result+'" /><p>上传中</p></li>')
                });

            }
            ,done: function(res){
                //如果上传失败
                if(res.code == 0){
                    $("#thumb").val(res.url);
                    $('#layui-upload-box li p').text('上传成功');
                    return layer.msg(res.msg);
                }
                return layer.msg(res.msg);
            }
        });
    })

    layui.config({
        base: '/sku/' //静态资源所在路径
    }).extend({
        server: 'server',
        laySku: 'laySku'
    }).use(['server','laySku'],function(exports) {
        var server = layui.server,
            table = layui.table,
            form = layui.form,
            laySku = layui.laySku,
            $ = layui.$;


        server = {
            "success": null,
            "code": 0,
            "data": [{
                "id": "5942768577949877525",
                "is_required":1,
                "name": "颜色",
                "sort": 1,
                "remark": null,
                "shopId": "24067562883074797",
                "propValueList": [{
                    "id": "1153355001239653666",
                    "keyId": "5942768577949877525",
                    "name": "白色",
                    "sort": "1",
                    "remark": "1",
                    "shopId": "24067562883074797",
                    "propKey": null
                }, {
                    "id": "3476663502563787178",
                    "keyId": "5942768577949877525",
                    "name": "红色",
                    "sort": "1",
                    "remark": "1",
                    "shopId": "24067562883074797",
                    "propKey": null
                }]
            }, {
                "id": "7004885251889806887",
                "is_required":1,
                "name": "尺寸",
                "sort": 1,
                "remark": null,
                "shopId": "24067562883074797",
                "propValueList": [{
                    "id": "3697573256632223615",
                    "keyId": "7004885251889806887",
                    "name": "1寸",
                    "sort": "1",
                    "remark": "1",
                    "shopId": "24067562883074797",
                    "propKey": null
                }, {
                    "id": "7247064376898044469",
                    "keyId": "7004885251889806887",
                    "name": "2寸",
                    "sort": "1",
                    "remark": "1",
                    "shopId": "24067562883074797",
                    "propKey": null
                }]
            }, {
                "id": "8539195543055021490",
                "is_required":0,
                "name": "产地",
                "sort": 1,
                "remark": null,
                "shopId": "24067562883074797",
                "propValueList": [{
                    "id": "638785769989161217",
                    "keyId": "8539195543055021490",
                    "name": "中国",
                    "sort": "1",
                    "remark": "1",
                    "shopId": "24067562883074797",
                    "propKey": null
                }, {
                    "id": "968453847158640353",
                    "keyId": "8539195543055021490",
                    "name": "香港",
                    "sort": "1",
                    "remark": "1",
                    "shopId": "24067562883074797",
                    "propKey": null
                }]
            }],
            "msg": "根据商品分类获取属性名集合！"
        }


        var sku = new laySku({
            id:'SKU_TYPE',//checkbox选择框
            container_id:'skuTable',//容器id渲染table
            data:server.data,//数据类型
            rowReturn:true,//是否绑定tr单击事件
            rowMaster:function(res){//绑定tr单击事件执行的操作
                console.log(res)
            },
            btn:'skuSubmit',//按钮提交
            skuSubmitBind:function(res){//提交之后的某些操作
                console.log(res)
            },
            uploadSrc:'https://httpbin.org/post',//图片上传接口
            uploadBefore:function(obj,elem){//上传之前的操作
                obj.preview(function(index, file, result){
                    elem.append('<img style="width:38px;height:38px;object-fit:cover;" src="http://xxh2019.oss-cn-beijing.aliyuncs.com/hmyp/JULoX1578887334705.jpg">')
                });
            },
            uploadDone:function(){//上传图片成功的操作

            },
            uploadError:function(){//上传图片失败的操作

            }
        })
        sku.init()
    })


</script>
<!-- 实例化编辑器 -->
<script type="text/javascript">
    var ue = UE.getEditor('container');
    ue.ready(function() {
        ue.execCommand('serverparam', '_token', '{{ csrf_token() }}');//此处为支持laravel5 csrf ,根据实际情况修改,目的就是设置 _token 值.
    });
</script>
